<ion-view hide-nav-bar='true' class="details">

  <div class="menu-tittle">
    <div class="menu-tittle-left">
      <img src="../img/settings/left.svg" class="left">
    </div>
    <div class="menu-tittle-middle f17">
      XXX的请假申请
    </div>
    <div class="menu-tittle-right"></div>
  </div>


  <ion-content>
    <div class="details-header menu-bar">
      <div class="menu-bar-left">
        <img src="../img/adam.jpg">
        <div>
          <p class="f17">胡雪晨</p>
          <span class="f13 blue">等待熊乐审批</span>
        </div>
      </div>
      <div class="menu-bar-right">
        <span class="blue mr10 f13">展开</span>
        <img src="../img/details/up.svg" class="up">
        <img src="../img/details/down.svg" class="down">
      </div>
    </div>

    <div class="progress-map">
      <div class="progress-map-item">
        <img src="../img/details/choose.svg" class="choose">
        <div class="tooltip">
          <div class="angle"><div class="anglein"></div></div>
          <div class="p-item-content">
            <div class="pic-top">
              <div class="details-header menu-bar">
                <div class="menu-bar-left">
                  <img src="../img/adam.jpg">
                  <div>
                    <p class="f16">胡雪晨</p>
                    <span class="f13 blue">等待熊乐审批</span>
                  </div>
                </div>
                <div class="menu-bar-right">
                  <span class="grey mr10 f13">2019-09-08</span>
                </div>
              </div>
            </div>
            <div class="pic-bottom">
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
            </div>
          </div>
        </div>
      </div>
      <div class="progress-map-item">
        <img src="../img/details/choose.svg" class="choose">
        <div class="tooltip">
          <div class="angle"><div class="anglein"></div></div>
          <div class="p-item-content">
            <div class="pic-top">
              <div class="details-header menu-bar">
                <div class="menu-bar-left">
                  <img src="../img/adam.jpg">
                  <div>
                    <p class="f16">胡雪晨</p>
                    <span class="f13 blue">等待熊乐审批</span>
                  </div>
                </div>
                <div class="menu-bar-right">
                  <span class="grey mr10 f13">2019-09-08</span>
                </div>
              </div>
            </div>
            <div class="pic-bottom">
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
              1.H3 BPM社区进行为期5天的短任务学习；
              2.每天观看一个视频并签到打卡，视频学习时间自由安排。
            </div>
          </div>
        </div>
      </div>
      <div class="progress-map-item">
        <img src="../img/details/unchoose.svg" class="unchoose">
        <div class="tooltip">
          <div class="angle"><div class="anglein"></div></div>
          <div class="p-item-content">
            <div class="pic-top">
              <div class="details-header menu-bar">
                <div class="menu-bar-left">
                  <img src="../img/adam.jpg">
                  <div>
                    <p class="f16">胡雪晨</p>
                    <span class="f13 blue">等待熊乐审批</span>
                  </div>
                </div>
                <div class="menu-bar-right">
                  <span class="grey mr10 f13">2019-09-08</span>
                </div>
              </div>
            </div>
            <!--<div class="pic-bottom">-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>

    <div class="menu-bar progress-picture">
      <div class="menu-bar-left">
        <img src="../img/details/progress.svg" class="progress mr10">
        <span class="f16">流程图</span>
      </div>
      <div class="menu-bar-right">
        <i class="icon ion-chevron-right icon-accessory f13"></i>
      </div>
    </div>

    <div class="menu-sub f13">基本信息</div>

      <div class="menu-input">
        <div class="menu-input-left f16">发起人</div>
        <div class="menu-input-right f14">
          <input type="txt" placeholder="请输入单行文本" class="f14" value="赵亮">
        </div>
      </div>

      <div class="menu-input">
        <div class="menu-input-left f16">发起时间</div>
        <div class="menu-input-right f14">
          <input type="date" placeholder="请选择日期" class="f14" value="2019-09-08">
        </div>
      </div>


      <div class="menu-input">
        <div class="menu-input-left f16">所属组织</div>
        <div class="menu-input-right f14">
          <input type="txt" placeholder="请输入单行文本" class="f14" value="财务">
        </div>
      </div>

      <div class="menu-input">
        <div class="menu-input-left f16">单人/部门</div>
        <div class="menu-input-right f15">
          <span>张三</span>
          <i class="icon ion-chevron-right icon-accessory f13"></i>
        </div>
      </div>


      <div class="menu-input">
        <div class="menu-input-left f16">多人/部门</div>
        <div class="menu-input-right f15">
          <span>张三、李四、王五</span>
          <i class="icon ion-chevron-right icon-accessory f13"></i>
        </div>
      </div>

      <div class="menu-input-multi menu-input">
        <div class="menu-input-left f16">多行文本</div>
        <div class="menu-input-right f15">
          <textarea>张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三</textarea>
        </div>
      </div>


      <div class="attachment">
        <div class="att-tittle f16">附件</div>
        <div class="att-content">
          <div class="ac-left">
            <img class="pic" src="../img/details/pic.svg">
            <!--<img class="file" src="../img/details/file.svg">-->
          </div>
          <div class="ac-right">
            <div class="acr-left">
              <p class="f14">IMG1234567890.JPG</p>
              <span class="f12">123.75KB</span>
            </div>
            <div class="acr-right">
              <img class="download" src="../img/details/download.svg">
            </div>
          </div>
        </div>

        <div class="att-content">
          <div class="ac-left">
            <img class="pic" src="../img/details/pic.svg">
            <!--<img class="file" src="../img/details/file.svg">-->
          </div>
          <div class="ac-right">
            <div class="acr-left">
              <p class="f14">IMG1234567890.JPG</p>
              <span class="f12">123.75KB</span>
            </div>
            <div class="acr-right">
              <img class="download" src="../img/details/download.svg">
            </div>
          </div>
        </div>

        <div class="att-content">
          <div class="ac-left">
            <img class="pic" src="../img/details/pic.svg">
            <!--<img class="file" src="../img/details/file.svg">-->
          </div>
          <div class="ac-right">
            <div class="acr-left">
              <p class="f14">IMG1234567890.JPG</p>
              <span class="f12">123.75KB</span>
            </div>
            <div class="acr-right">
              <img class="download" src="../img/details/download.svg">
            </div>
          </div>
        </div>

        <div class="att-content">
          <div class="ac-left">
            <img class="pic" src="../img/details/pic.svg">
            <!--<img class="file" src="../img/details/file.svg">-->
          </div>
          <div class="ac-right">
            <div class="acr-left">
              <p class="f14">IMG1234567890.JPG</p>
              <span class="f12">123.75KB</span>
            </div>
            <div class="acr-right">
              <img class="download" src="../img/details/download.svg">
            </div>
          </div>
        </div>
      </div>

      <div class="menu-input-multi menu-input">
        <div class="menu-input-left f16">理由</div>
        <div class="menu-input-right f15">
          <textarea>理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由理由</textarea>
        </div>
      </div>

  </ion-content>

  <div class="tab-button">
    <div class="tab-button-item f16">同意</div>
    <div class="tab-button-item f16">驳回</div>
    <div class="tab-button-item f16">更多</div>
  </div>


</ion-view>
